import React, { FC, useState, useEffect } from 'react';
import { Button, Form, Input, Slider, message } from 'antd';

const { TextArea } = Input;

type myFields = Element | null;

const TreeSelectTest: FC = () => {
  const [value, setValue] = useState([]);
  const [form] = Form.useForm();

  const [marks, setMarks] = useState({
    0: '0',
    100: 100,
  });

  const btn = ['一剑霜寒十九州', '醉后不知天在水', '十步杀一人'];

  const res = [
    {
      code: 1,
      name: '湖北省',
      children: [
        {
          code: 1,
          name: '武汉市',
          children: [
            {
              code: 1,
              name: '汉阳区',
              children: [
                {
                  code: 1,
                  name: '水上分局1',
                },
              ],
            },
            {
              code: 1,
              name: '武昌区',
              children: [
                {
                  code: 1,
                  name: '水上分局2',
                },
              ],
            },
            {
              code: 1,
              name: '汉口区',
              children: [
                {
                  code: 1,
                  name: '水上分局3',
                },
              ],
            },
          ],
        },
        {
          code: 1,
          name: '十堰市',
          children: [
            {
              code: 1,
              name: '郧阳区',
              children: [
                {
                  code: 1,
                  name: '安阳镇',
                },
              ],
            },
            {
              code: 1,
              name: '茅箭区',
              children: [
                {
                  code: 1,
                  name: '小川乡',
                },
              ],
            },
          ],
        },
      ],
    },
  ];

  const treeFindPath = (tree, func, path = []) => {
    if (!tree) return [];
    for (const data of tree) {
      path.push(data.name);
      if (func(data)) return path;
      if (data.children) {
        const findChildren = treeFindPath(data.children, func, path);
        if (findChildren.length) return findChildren;
      }
      path.pop();
    }
    return [];
  };

  useEffect(() => {
    console.log('1111');
    console.log(treeFindPath(res, (data) => data.name === '安阳镇'));
  }, []);

  const handleBtn = (item: string) => {
    console.log(item);
    insertValue(item);
  };

  const insertValue = async (value: string) => {
    const myField: Element | null = document.querySelector('#textarea');
    console.log('myField--', myField);

    if (myField.selectionStart || myField?.selectionStart === 0) {
      let startPos = myField.selectionStart;
      let endPos = myField.selectionEnd;
      form.setFieldsValue({
        value:
          myField.value.substring(0, startPos) +
          value +
          myField.value.substring(endPos, myField.value.length),
      });
      setTimeout(() => {
        myField.focus();
        myField.setSelectionRange(
          startPos + value.length,
          startPos + value.length,
        );
        // myField.selectionStart = myField.selectionEnd = startPos + value.length
      }, 0);
    } else {
      form.setFieldsValue({
        value: value,
      });
    }
  };

  const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 10 },
  };

  const handleOnchange = (value) => {
    console.log(value);
    console.log(Object.keys(marks).length);
    if (Object.keys(marks).length > 10) {
      message.error('不能超过10个');
    } else {
      setMarks({
        ...marks,
        [value]: value,
      });
    }
  };

  return (
    <div>
      <Slider marks={marks} onChange={handleOnchange} />
      <Form {...layout} form={form}>
        <Form.Item label="诗词歌赋" name="value">
          <TextArea id="textarea" />
        </Form.Item>
        <Form.Item label="1">
          {btn.map((item) => (
            <Button onClick={() => handleBtn(item)} key={item}>
              {item}
            </Button>
          ))}
        </Form.Item>
      </Form>
    </div>
  );
};

export default TreeSelectTest;
